<template>
  <div class="zhiboxitong">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">

          <div class="zhiboxitong_right">
              <div style="background: #E5EFFF;padding: 15px 20px; font-size: 14px; margin-bottom: 20px; margin-left: 20px;display: flex;border-radius:10px;width:98%">
              <img src="../../static/img/bluelogo.png" style="width: 20px;height: 20px; margin-right: 5px;" />
              小程序分享存在风险：使用您分享小程序的商户如果出现违规情况，您的小程序会面临扣分甚至禁用等处罚，如无信任基础请不要随意分享，详细处罚说明请查看
              <a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/operation/management/credit-points/" style="color: rgb(0, 88, 255);" target="_blank">《抖音小程序信用分规则》</a>
            </div>
          <div class="title_btn">
             <div style="margin-bottom: 18px;font-size:18px;font-weight:bold;margin-left: 25px;">小程序共享管理</div>
            <el-button  @click="addstore" style="margin:0 30px 20px 0;  border-radius: 10px;background:#F72C50;color:white;border:none">添加共享分销商</el-button>
          </div>
          <div class="table_container">
             <el-table
            :header-cell-style="{fontSize: '14px', backgroundColor: 'rgba(246,247,252,0.9)' }"
            :cell-style="{fontSize: '14px', backgroundColor: 'rgba(246,247,252,0.9)' }"
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="merchant_name"
                align="left"
                label="共享商户名称">
                </el-table-column>
                <el-table-column
                  prop="app_name"
                  align="left"
                  label="共享小程序">
                </el-table-column>
                <el-table-column
                  prop="share_at"
                  align="left"
                  label="共享时间">
                </el-table-column>
                <el-table-column label="操作" align="left">
                    <template slot-scope="scope">
                        <div
                            @click="delpage(scope.row.id,scope.row.merchant_id)" style="color:#335DFF;cursor: pointer;">删除共享</div>
                    </template>
                </el-table-column>
            </el-table>
          </div>
          </div>
        </div>
    </div>
    <el-dialog
      title="添加共享商户"
      :visible.sync="choosegxshow"
      :center="true"
      width="500px">
      <div class="t_gx_choose">
        <span style="margin-left:50px">共享小程序:</span>
        <el-select v-model="shareform.id" placeholder="选择要共享的小程序">
          <el-option
          v-if="item.type==1"
            v-for="item in xcxlist"
            :key="item.id"
            :label="item.app_name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div  class="t_gx_choose" style="margin-top: 30px;">
        <span style="margin-left:50px">选择分销商:</span>
        <el-select filterable v-model="shareform.merchant_id" placeholder="选择分销商">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
      </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="fenupsure" style="background:#335DFF;border-radius: 10px;">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :center="true"
      title="删除共享确认"
      :visible.sync="delshow"
      width="500px">
      <div>
        删除共享后被共享端已发布的页面将会删除，为避免造成被共享端损失，请事先沟通后再删除。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delsure" style="background:#335DFF;border-radius: 10px;">确定删除</el-button>
        <el-button  @click="delshow = false" style="border-radius: 10px;">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  export default {
    components: {
      top,
      left,
      chuantu
    },
    name: "zhiboxitong",
    data() {
      return {
          tableData: [],
          options: [],
          xcxlist:[],
          choosegxshow:false,
          delshow:false,
          tableData:[],
          shareform:{
            id:'',
            merchant_id:'',
          },
          del_id:'',
          del_merchant_id:''

      }
    },
    beforeCreate() {

    },
    created() {
      //获取分销列表
      this.getfenlist()
      this.getxcxlist()
      this.getlist()
    },
    mounted() {




    },
    methods: {
      getlist(){
        axios.get(`${this.apis}/api/mini/merchants`)
          .then(response => {
              if (response.data.msg.code == 0) {
                console.log('列表--')
                  console.log(response)
                 this.tableData = response.data.data
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });
      },
      addstore(){
        //清空form
        this.shareform.id = ''
        this.shareform.merchant_id = ''
        this.choosegxshow = true
      },
      delpage(id,merchant_id){
        this.delshow = true
        this.del_id = id
        this.del_merchant_id = merchant_id

      },
      //提交分销给别人
      fenupsure(){
        if(this.shareform.id==''){
          this.$message.error('选择要共享的小程序');
          return
        }
        if(this.shareform.merchant_id==''){
          this.$message.error('选择分销商');
          return
        }
        axios.post(`${this.apis}/api/mini/merchant`,this.shareform)
          .then(response => {
              if (response.data.msg.code == 0) {
                  console.log(response.data.data)
                  this.choosegxshow = false
                  this.getlist()
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });
      },

      //获取分销列表
      getfenlist(){
        axios.get(`${this.apis}/api/merchants`)
          .then(response => {
              if (response.data.msg.code == 0) {
                  console.log(response.data.data)
                  if(response.data.data){
                    for(var x=0;x<response.data.data.length;x++){
                      this.options.push(response.data.data[x])
                    }
                  }
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });
      },
      //小程序列表
      getxcxlist: function() {
        axios.get(`${this.apis}/api/mini/list`, {
          params:{
            page: 1,
            page_size: 20,
            type:0
          }
        })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.xcxlist = response.data.data.data

            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      },
      //删除
      delsure(){

        axios.post(`${this.apis}/api/mini/merchant/delete`,{
          id:this.del_id,
          merchant_id:this.del_merchant_id
        })
          .then(response => {
              if (response.data.msg.code == 0) {
                  console.log(response.data.data)
                  this.delshow = false
                  this.getlist()
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });
      }

    }
  }
</script>
<style scoped>
 .table_container{
  background: #F8F9FD;
  padding: 30px;
  border-top-left-radius:30px ;
 }


.title_btn{
  display: flex;
  justify-content: space-between;
}

  .el-alert--info.is-light{
    background-color: #E4EEFF;
  }
  .t_type_font{
    font-size: 14px;
    display: flex;
  }
  .t_error_res{
    font-size: 14px;
    color: #FF3131;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .t_xcx_title{
    font-size: 18px;
    color: #6C6C6C;
    font-weight: bold;
    margin-bottom: 20px;
}
.no_bb{
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 100px;

}
/deep/.t_gx_choose .el-input--suffix .el-input__inner{
  /* background-color: #F3F3F3; */
  border-radius: 12px;
  width: 220px;
  /* display: flex; */
  /* border: none; */
}
</style>
<style scoped lang="less">
 /deep/ .el-table{
  background-color: #F8F9FD;
}
/deep/ .el-table__body tr td:first-child {
  border-radius: 20px 0 0 20px;
  padding-left: 10px;
  box-sizing: border-box;
}
/deep/ .el-table__body tr td:last-child {
  border-radius: 0 20px 20px 0;
}
// 给header左上角设置圆角
/deep/ .el-table__header th{
&:first-child{
 }
}
// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover > td {
  background-color: white !important;
}
/deep/ .el-table__body td{
  height: 72px;
}
//去掉每行的下边框
  /deep/ .el-table td.el-table__cell,/deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: none;
  } 
 
// 去掉表格单元格边框
.customer-table th{
    border:none;
  }
.customer-table td,.customer-table th.is-leaf {
  border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
  
}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{
  width: 0;
}
.customer-table::before{
  width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
// 表格有滚动时表格头边框
.el-table--border th.gutter:last-of-type {
    border: 1px solid #EBEEF5;  
    border-left: none;
    
}
// 去除边框线
/deep/ .el-table::before {
    height: 0;
    
}
  .zhiboxitong {
    // background: #f2f2f2;
    min-height: 100vh;
    /deep/ .el-button--danger.is-plain{ background: #fff;}
    /deep/ .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
      background: #fff; color: #F56C6C;
    }
    * {
      box-sizing: border-box;
    }
    .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
    .r{}
    .zhiboxitong_content {
      height: calc(100vh - 70px);

      .left {
        width: 210px;
        background: #FAFAFE;
        height: 100%;

      }

      .right {
        width: calc(100vw - 220px);
        height: calc(100vh - 70px);
        overflow: auto;

        .zhiboxitong_right {


          background: #fff;
          border-radius: 5px;
          padding: 20px 0 0 20px;
        }

        .zhiboxitong_table {
          margin-top: 20px;
        }

        .xiaochengxuli {
          background: #f9f9f9;
          margin: 10px;
          padding: 20px;
          width: 420px;
          position: relative;

          img {
            width: 100px;
            height: 100px;
          }
        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
      /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
  }
</style>
